<template>
  <!-- 传入订单id和价钱 -->
  <view class="pay column">
    <!-- 小程序：微信支付 -->
    <!--  #ifdef  MP-WEIXIN -->
    <view class="insurePay">
      <view class="pay-price">
        <text style="font-size: 32rpx">￥</text>
        {{ data.pay_price }}
      </view>

      <view class="payWay">
        <view class="g-listBox flexBetween">
          <view class="flexCenter">
            <image
              style="width: 54rpx; height: 47rpx; margin-right: 21rpx"
              src="@/static/images/pay-weixin.png"
            ></image>
            <text class="tit">微信支付</text>
          </view>
          <text
            class="mix-icon icon-xuanzhong"
            :class="{ active: true }"
          ></text>
        </view>
      </view>

      <view class="submit" @click="payByUnipay"> 确认支付 </view>
    </view>
    <!--  #endif -->
    <!-- #ifdef  H5 -->
    <!-- 公众号 -->
    <view class="insurePay">
      <view class="pay-price">
        <text style="font-size: 32rpx">￥</text>
        {{ data.pay_price }}
      </view>

      <view class="payWay">
        <view class="g-listBox flexBetween">
          <view class="flexCenter">
            <image
              style="width: 54rpx; height: 47rpx; margin-right: 21rpx"
              src="@/static/images/pay-weixin.png"
            ></image>
            <text class="tit">微信支付</text>
          </view>
          <text
            class="mix-icon icon-xuanzhong"
            :class="{ active: true }"
          ></text>
        </view>
      </view>

      <view class="submit" @click="payByWeixinPay" v-if="orderStatus">
        确认支付
      </view>
    </view>
    <!--  #endif -->

    <!-- 小程序：删除提醒 -->
    <mix-modal
      ref="mixModal"
      title="提示"
      text="确认取消支付？"
      remark="您的订单还未完成，请尽快支付"
      cancelText="确定离开"
      confirmText="继续支付"
      @onConfirm="diaConfirm"
      @onClose="diaOnClose"
    ></mix-modal>
  </view>
</template>

<script>
import mixModal from '@/components/mix-modal/mix-modal'
// #ifdef H5
import config from "@/config/index.js";   //  域名前缀
// #endif
export default {
  components: {
    mixModal,
  },
  data() {
    return {
      resultType: "insurePay",
      payStatus: "", //  支付状态，支付取消
      timeup: { hour: 23, min: 59, sec: 59 },
      orderStatus: true,
      data: {
        pay_price: "",
      },
    };
  },
  onLoad(options) {
    const data = JSON.parse(options.data);
    this.data = data;
  },
  methods: {
    // 小程序：确认支付
    async payByUnipay() {
      const res = await this.$http(this.$API.pay.appletPayment, {
        orderId: this.data.orderId,
      });
      if (!res.data.success) return;

      const orderInfo = res.data.result;
      const { timeStamp, nonceStr, signType, paySign } = orderInfo;
      const payParams = {
        timeStamp,
        nonceStr,
        package: orderInfo.packages,
        signType,
        paySign,
        success: (e) => {
          // 支付成功
        },
        fail: (err) => {
          if (
            // 取消支付：还在当前页
            err.errMsg.indexOf("取消") > -1 ||
            err.errMsg.indexOf("cancel") > 1 ||
            err.errMsg.indexOf("-2") > -1
          ) {
            this.$refs.mixModal.open();
          } else {
            // 支付失败
          }
        },
      };
      // 调用支付
      uni.requestPayment(payParams);
    },
    // 微信h5的支付
    async payByWeixinPay() {
      const res = await this.$http(this.$API.pay.appletPayment, {
        orderId: this.data.orderId,
      });
      if (!res.data.success) return;
      const orderInfo = res.data.result;
      if (orderInfo.backCode == "SUCCESS") {
        const { timeStamp, nonceStr, signType, paySign } = orderInfo;
        const payParams = {
          timeStamp,
          nonceStr,
          package: orderInfo.packages,
          signType,
          paySign,
        };
        payParams.appId = config.weixinAppId;
        // 调用支付
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          payParams,
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 支付成功
            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              // 取消支付
            }
          }
        );
      } else if (orderInfo.backCode == "FAIL") {
        uni.showToast({
          title: orderInfo.backMsg,
          duration: 2000,
        });
      }
    },
    // 取消支付：继续支付
    diaConfirm() {},
    // 微信小程序取消支付：确定离开
    async diaOnClose() {
      uni.navigateBack({ delta: 2 });
    },
    // 微信H5取消支付：确定离开
    async diaWinxinH5OnClose() {
      window.history.go(-3);
    },
  },
};
</script>

<style scoped lang="scss">
.insurePay {
  padding: 80rpx 0;
  align-items: center;
  text-align: center;
}
.pay-time {
  width: auto;
  justify-content: center;
  margin-bottom: 54rpx;
  font-size: 28rpx;
  text {
    color: #999999;
  }
}
.pay-price {
  margin-bottom: 80rpx;
  font-size: 46rpx;
  color: #333;
  line-height: 36rpx;
  font-weight: 500;
}

.payWay {
  width: calc(100% - 60rpx);
  margin: 0 30rpx;

  .icon-xuanzhong {
    font-size: 40rpx;
    color: #ddd;

    &.active {
      color: $base-color;
    }
  }
}

// 确认支付
.submit {
  margin: 0 30rpx;
  position: fixed;
  bottom: 20rpx;
  width: calc(100% - 60rpx);
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: $base-color;
  border-radius: 45rpx;
  color: #fff;
}
/deep/.uni-countdown__number {
  background-color: #fafafa !important;
}
</style>
